<template>
    <!-- 健康管理下档案管理里的:详情按钮对话框 -->
    <el-dialog title="老人健康档案:" :visible.sync="dialogFormVisible">
        <el-form v-model="form" style="height: 500px;;overflow: auto;">
            <!-- 头像以及头像右边的内容 -->
            <el-form-item>
                <el-col :span="8">
                    <img :src="form.photo_url" alt="头像">
                </el-col>
                <el-col :span="16">
                    <el-form :inline="true" :model="form">
                        <el-form-item label="用户名" label-width="55px" style="margin-bottom: 18px;margin-right: 1px;">
                            <el-input v-model="form.older_name" :disabled="true"></el-input>
                        </el-form-item>
                        <el-form-item label="性别" label-width="55px" style="margin-bottom: 18px;margin-right: 1px;">
                            <el-input v-model="form.sex" :disabled="true"></el-input>
                        </el-form-item>
                        <el-form-item label="年龄" label-width="55px" style="margin-bottom: 18px;margin-right: 1px;">
                            <el-input v-model="form.age" :disabled="true"></el-input>
                        </el-form-item>
                        <el-form-item label="身份证" label-width="55px" style="margin-bottom: 18px;margin-right: 1px;">
                            <el-input v-model="form.id_card" :disabled="true"></el-input>
                        </el-form-item>
                        <el-form-item label="地址" label-width="55px">
                            <el-input v-model="form.address" style="width: 473px;margin-right: -50px;" :disabled="true"></el-input>
                        </el-form-item>
                    </el-form>
                </el-col>
            </el-form-item>


            <!-- 头像下方健康报告上方的内容 -->
            <div style="display: flex; justify-content: center;align-items: center;">
                <span>
                    <div style="width: 35px;margin-left: 15px;">
                        亲属
                    </div>
                </span>
                <el-input v-model="form.clan" style="width: 30%;" :disabled="true"></el-input>

                <span>
                    <div style="width: 65px;margin-left: 15px;">
                        亲属电话
                    </div>
                </span>
                <el-input v-model="form.clan_phone" style="width: 25%;" :disabled="true"></el-input>

                <span>
                    <div style="width: 50px;margin-left: 15px;">
                        负责人
                    </div>
                </span>
                <el-select v-model="form.older_employee_id" style="width: 30%;margin-right: 4px;">
                        <el-option :label="item.username" :value="item.id" v-for="item in employeeList" :key="item.id" :disabled="true"></el-option>
                </el-select>

            </div>

            <div style="display: flex; justify-content: center;align-items: center; margin: 20px 0;">
                <span>
                    <div style="width: 63px;margin-left: 15px;">
                        建档时间
                    </div>
                </span>
                <el-date-picker type="date" v-model="form.create_time" style="width: 18%;" :disabled="true"></el-date-picker>

                <span>
                    <div style="width: 47px;margin-left: 15px;">
                        建档人
                    </div>
                </span>
                <el-select v-model="form.employee_id" placeholder="请选择变更的员工" style="width: 30%;">
                        <el-option :label="item.username" :value="item.id" v-for="item in employeeList" :key="item.id"></el-option>
                </el-select>

                <span>
                    <div style="width: 85px;margin-left: 15px;">
                        新冠疫苗(次)
                    </div>
                </span>
                <el-input v-model="form.vaccination" style="width: 25%;margin-right: 5px;"></el-input>
            </div>

            <!-- 其他信息 -->
            <div style="margin-left: 15px;">
                其他信息:
            </div>
            <el-input type="textarea" v-model="form.other_info" style="margin: 10px 0 20px 0;" :disabled="true"></el-input>

            <!-- 健康报告下方的内容 -->
            <el-divider>健康报告</el-divider>

            <el-form-item >
                <el-col :span="12" style="padding-right: 5px;">
                    <el-form-item label="体温(℃)">
                                <el-input v-model="form.temperature" placeholder="审批人"></el-input>
                    </el-form-item>
                    <el-form-item label="身高(cm)">
                                <el-input v-model="form.height" placeholder="审批人"></el-input>
                    </el-form-item>
                    <el-form-item label="体重(kg)">
                                <el-input v-model="form.weight" placeholder="审批人"></el-input>
                    </el-form-item>
                    <el-form-item label="低压(mmHg)正常:60-90">
                                <el-input v-model="form.min_pressure" placeholder="审批人"></el-input>
                    </el-form-item>
                </el-col>

                <el-col :span="12" style="padding-right: 5px;">
                    <el-form-item label="呼吸频率(次/min)">
                                <el-input v-model="form.respiratory_rate" placeholder="审批人"></el-input>
                    </el-form-item>
                    <el-form-item label="脉搏(次/min)">
                                <el-input v-model="form.pulse" placeholder="审批人"></el-input>
                    </el-form-item>
                    <el-form-item label="心电图">
                                <el-input v-model="form.electrocardiogram" placeholder="审批人"></el-input>
                    </el-form-item>
                    <el-form-item label="高压(mmHg)正常:90-130">
                                <el-input v-model="form.high_pressure" placeholder="审批人"></el-input>
                    </el-form-item>
                </el-col>
            </el-form-item>

            <!-- 按钮 -->
            <el-form-item size="large" style="margin-left: 80%;">
                <el-button type="primary" @click="onSubmit" v-show="isUpdate">修改</el-button>
                <el-button @click="dialogFormVisible=false">取消</el-button>
            </el-form-item>
        </el-form>

    </el-dialog>
</template>

<script>
    import myAxios from '@/tools/myAxios';
    import Qs from 'qs';
    export default {
        name:'FilesOlderDetailDialogBox',
        data() {
            return {
                // 控制对话框的出现
                dialogFormVisible:false,
                // 用来展示的老人信息
                form:{},
                // 存放所有员工信息
                employeeList:[],
                // 存放当前登录管理员手下的全部员工信息
                adminEmployeeList:[],
                // 是否展示修改按钮
                isUpdate:false
                
            }
        },
        watch:{
            form(){           
                this.dialogFormVisible = true;
            },
            dialogFormVisible(newValue,oldValue){
                // 打开对话框就进行处理
                if(oldValue === false){
                        this.adminEmployeeList.forEach((item)=>{
                        if(this.form.older_employee_id === item.id){
                            this.isUpdate = true;
                        }
                    })
                // 重置isUpdate的值
                }else{
                    this.isUpdate = false;
                }
            }
        },
        methods:{
            // 回调(获取用来展示的老人健康信息)
            apperHealthDetail(data){
                this.form = data;
            },
            // 修改按钮
            onSubmit(){
                myAxios(
                    'http://localhost:8088/older/updatehealthfilebyid',
                    'post',
                    Qs.stringify(this.form),
                    (data)=>{
                        // 提示一下
                        this.$message({
                            message: '修改成功!',
                            type: 'success'
                        });
                        this.dialogFormVisible = false;
                        window.location.reload();
                    }
                )
            }
        },
        mounted(){
            // 绑定自定义事件
            this.$bus.$on('clickHealthDetail',this.apperHealthDetail);

            // 获取所有的员工信息
            myAxios(
                'http://localhost:8088/employee/getallemployeelist',
                'get',
                null,
                (data)=>{
                    this.employeeList = data;
                }
            );

            // 获取当前管理员下的所有的员工信息
            myAxios(
                'http://localhost:8088/admin/getallemployee',
                'get',
                null,
                (data)=>{
                    this.adminEmployeeList = data;
                }
            )
        },
        beforeDestroy(){            
            // 解绑
            this.$bus.$off('clickHealthDetail');
        }
    }
</script>

<style scoped lang="less">

img{
    height: 150px;
    width: 150px;
    border-radius: 50%;
    margin-left: 50px;
}
.el-divider--horizontal {
    margin-top: 0;
    margin-bottom: 10px;
}

</style>